<template>
  <div>
    <el-dialog title="编辑" :visible.sync="showFlag" :center="true">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="商品名称" prop="name" label-width="120px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price" label-width="120px">
          <el-input v-model="formData.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="img" label-width="120px">
          <el-input v-model="formData.img" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上架标志" prop="shelve_flag" label-width="120px">
          <el-switch v-model="formData.shelve_flag"></el-switch>
        </el-form-item>
        <el-form-item label="上架时间" prop="shelve_time" label-width="120px">
          <el-date-picker
            v-model="formData.shelve_time"
            type="datetime"
            placeholder="请选择上架时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!--  底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getApi, saveApi} from '@/api/sys/GoodsInfo'
  import {
    elementVerifyEmail,
    elementVerifyPhone,
    elementVerifyPositiveDecimal,
    elementVerifyPositiveInteger
  } from '@/util/elementVerifyUtil'
  import messageUtil from "@/util/messageUtil"

  export default {
    name: "edit",
    props: {
      // 是否显示
      showFlag: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: null
      }
    },

    data() {
      return {
        // 表单数据
        formData: {
          // 商品名称
          name: '',
          // 价格
          price: null,
          // 商品图片
          img: '',
          // 上架标志
          shelveFlag: true,
          // 上架时间
          shelveTime: null,
        },
        // 校验规则
        rules: {
          name: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
          stature: [{
            required: true, validator: (rule, value, callback) => {
              elementVerifyPositiveDecimal(rule, value, callback, "价格", 300)
            }, trigger: 'change'
          }],
          name: [{required: true, message: '请输入商品图片', trigger: 'blur'}],
          disableFlag: [{required: true, message: '请选择上架标志', trigger: 'change'}],
          birthday: [{type: 'date', required: true, message: '请选择上架时间', trigger: 'change'}],
        }
      }
    },

    methods: {
      // 提交表单
      submit() {
        // 设置id
        this.formData.id = this.id
        // 校验表单数据
        this.$refs['form'].validate((valid) => {
          // 校验通过
          if (valid) {
            // 保存
            saveApi(this.formData).then((res) => {
              if (res.success) {
                // 关闭表单
                this.closeForm()
              } else {
                // 展示错误消息
                messageUtil.error(res, this)
              }
            })
          }
        })
      },


      // 关闭表单
      closeForm() {
        // 触发 reloadTable 事件   让父组件重新加载table数据
        this.$emit('reloadTable')

        // 触发changeForm 事件    让父组件关闭 本表单
        this.$emit('changeForm')

        // 重置表单
        this.$refs['form'].resetFields()
      },

      // 查询详情
      getDetail() {
        getApi(this.id).then((res) => {
          if (res.success) {
            this.formData = res.data
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
    // 监控数据
    watch: {
      // 监控 id值的变化
      id(newval, val) {
        // 打开表单 并且 有传入id
        if (this.showFlag && newval) {
          // 查询详情
          this.getDetail()
        }
      }
    }
  }
</script>

<style scoped>

</style>

